class Observer {
    constructor(data) {
        this.walk(data)
    }
    walk(data) {
        // 判断data是否为对象
        if(!data || typeof data !== 'object') return
        // 遍历属性 调用defineReactive
        Object.keys(data).forEach(key => {
            this.defineReactive(data, key, data[key])
        })
    }
    // 传递第三个参数val，而不是obj[key]，obj[key]又触发了vue里的get方法，造成无限递归
    defineReactive(obj, key, val) {
        this.walk(val)
        const that = this
        // 负责收集依赖并发送通知
        let dep = new Dep()
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get() {
                Dep.target && dep.addSub(Dep.target)
                return val
            },
            set(newVal) {
                if(newVal === val) return
                val = newVal
                that.walk(newVal)
                // 发送通知
                dep.notify()
            }
        })
    }
}